<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>志愿者信息修改</title>
    <include file="public@mobile_head"/>
    <style>
        .layui-btn{
            margin-left: -88px;
        }
    </style>
</head>
<body class="page-userinfo">
<!--头部-->
<div class="head">
    <div class="head-title"><a href="javascript:;" class="backTop" onclick="javascript:history.back(-1);">
        <i class="layui-icon layui-icon-left"></i>
    </a>志愿者登记修改</div>
</div>
<div class="zctj registere">
    <div class="topTitle">
        <div class="title">
            头像照片
        </div>
    </div>
    <div class="formRight">

        <a href="javascript:;" class="" id="test1">
            <img src="{$user.avatar}" id="pic"
                 width="135" style="cursor: pointer"/>
            (点击更换头像)
        </a>
    </div>
    <div class="topTitle">
        <div class="title">
            详细信息
        </div>
    </div>
    <div class="content registereForm">

    <form class="layui-form"  id="form">
            <div class="layui-form-item">
                <label class="layui-form-label widthSty">用户昵称:<br></label>
                <div class="layui-input-block">
                    <!--{$user.user_nickname|default=''}-->
                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" value="{$user.user_nickname|default=''}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label widthSty">身份证号:<br></label>
                <div class="layui-input-block">
                    <!--{$user.more.idcard|default=''}-->
                    <input type="text" id="idcard" name="more[idcard]" value="{$user.more.idcard|default=''}" required  lay-verify="required" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">性别:</label>
                <div class="layui-input-block">
                    {$sex[$user.sex]}
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label widthSty">出生日期:<br></label>
                <div class="layui-input-block">
                    {$user.birthday!=0?$user.birthday|date="Y-m-d":''}
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">社区:</label>
                <div class="layui-input-inline">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{$user.communities.name}
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">籍贯:</label>
                <div class="layui-input-block">
                    <input type="text" name="more[native]" value="{$more.native|default=''}"  placeholder="请输入籍贯" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">政治面貌:</label>
                <div class="layui-input-block">
                    <select name="more[politic]" lay-verify="required">
                        <option value="{$more.politic|default=''}">{$more.politic|default=''}</option>
                        <option value="0">群众</option>
                        <option value="1">团员</option>
                        <option value="2">党员</option>
                    </select>
                </div>
            </div>
            <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label">固定电话:</label>-->
            <!--<div class="layui-input-block">-->
            <!--<input type="text" name="title" required  lay-verify="required" placeholder="请输入您的固定电话" autocomplete="off" class="layui-input">-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label">移动电话:</label>-->
            <!--<div class="layui-input-block">-->
            <!--<input type="text" name="title" required  lay-verify="required" placeholder="请输入您的移动电话" autocomplete="off" class="layui-input">-->
            <!--</div>-->
            <!--</div>-->
            <div class="layui-form-item">
                <label class="layui-form-label">现住址:</label>
                <div class="layui-input-block">
                    <input type="text" name="more[address]" value="{$more.address|default=''}"  placeholder="请输入您的现住址" autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">团体(选填):</label>
                <div class="layui-input-block">
                    <select name="group" >
                        <option value="{$user.gorup|default=''}">{$user.groups.name|default='选择团体'}</option>
                        <foreach name="group" id="vo">

                            <option value="{$vo.id}">{$vo.name}</option>
                        </foreach>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">工作单位:</label>
                <div class="layui-input-block">
                    <input type="text" name="more[company]" value="{$more.company|default=''}"  placeholder="请输入你的工作单位" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label">QQ:</label>-->
            <!--<div class="layui-input-block">-->
            <!--<input type="text" name="more[qq]" required  lay-verify="required" placeholder="请输入你的QQ" autocomplete="off" class="layui-input" value="{$more.qq|default=''}">-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label">微信:</label>-->
            <!--<div class="layui-input-block">-->
            <!--<input type="text" name="more[weixin]" required  lay-verify="required" placeholder="请输入你的微信" autocomplete="off" class="layui-input" value="{$more.weixin|default=''}">-->
            <!--</div>-->
            <!--</div>-->
            <div class="layui-form-item">
                <label class="layui-form-label">职业:</label>
                <div class="layui-input-block">
                    <select name="more[work]" >
                        <option value="{$more.work|default=''}">{$more.work|default=''}</option>
                        <option value="保密">保密</option>
                        <option value="金融">农村农业</option>
                        <option value="生产加工">生产加工</option>
                        <option value="制造">制造</option>
                        <option value="服务娱乐">服务娱乐</option>
                        <option value="政治">政治</option>
                        <option value="科研教育">科研教育</option>
                        <option value="管理">管理</option>
                        <option value="商业">商业</option>
                        <option value="其他">其他</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文化程度:</label>
                <div class="layui-input-block">
                    <select name="more[educate]" >
                        <option value="{$more.educate|default=''}">{$more.educate|default=''}</option>
                        <option value="小学">小学</option>
                        <option value="初中">初中</option>
                        <option value="高中">高中</option>
                        <option value="大专">大专</option>
                        <option value="本科">本科</option>
                        <option value="硕士">硕士</option>
                        <option value="博士">博士</option>
                    </select>
                </div>
            </div>
            <!--<div class="layui-form-item layui-form-text">-->
            <!--<label class="layui-form-label">工作学习经历:</label>-->
            <!--<div class="layui-input-block">-->
            <!--<textarea name="more[experience]" placeholder="请输入您的工作学习经历" class="layui-textarea">{$more.experience|default=''}</textarea>-->
            <!--</div>-->
            <!--</div>-->
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">爱好及特长:</label>
                <div class="layui-input-block">
                    <textarea name="more[hobby]" placeholder="请输入您的爱好及特长" class="layui-textarea">{$more.hobby|default=''}</textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">补充信息:</label>
                <div class="layui-input-block">
                    <textarea name="more[extra]" placeholder="请输入补充信息" class="layui-textarea">{$more.extra|default=''}</textarea>
                </div>
            </div>
            <input type="hidden" name="avatar" id="img" value="{$user.avatar}">

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn btnWidth Btn"  lay-filter="per_data">提交个人信息</button>
                    <!--<button type="reset" class="layui-btn btnWidth ordBtn">下载个人档案</button>-->
                    <a href="{:url('portal/volunt/save_word',['user_id'=>$user.id])}" target="_blank" class="layui-btn btnWidth ordBtn">下载个人档案</a>
                </div>
            </div>
    </div>

    <div style="clear: both;"></div>
        </form>
        <!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">-->
            <!--<legend>车辆信息</legend>-->
        <!--</fieldset>-->
    <div class="topTitle">
        <div class="title">
            车辆信息
        </div>
    </div>
        <form class="layui-form" id="form_car">
            <div class="layui-form-item">
                <label class="layui-form-label">车牌号（选填）</label>
                <div class="layui-input-block">
                    <!--<input type="text" name="car_card" required  placeholder="" autocomplete="off" class="layui-input">-->
                    <if condition="$car_info!=null">{$car_info.car_card}</if>
                    <if condition="$car_info==null"><input type="text" name="car_card" required  lay-verify="required" placeholder="请输入您的车牌号" autocomplete="off" class="layui-input"></if>
                </div>
            </div>

            <div class="layui-row layui-col-space30">
                <div class="layui-col-md6 layui-col-xs6 layui-col-sm6">
                    <div class="layui-upload-drag" id="test10">
                        <a href="javascript:;">
                            <input type="hidden" name="img_a" id="a" value="">
                            <div class="topImg">
                                <!--<img src="/html/img/scImg.png" id="imga">-->
                                <if condition="$car_info!=null"><img src="{$car_info.img_a}" ></if>
                                <if condition="$car_info==null"><img src="/html/img/scImg.png" id="imga"></if>
                            </div>
                            <p>请上传行驶证（正页）</p>
                        </a>
                    </div>
                </div>
                <div class="layui-col-md6 layui-col-xs6 layui-col-sm6">
                    <div class="layui-upload-drag" id="test11">
                        <a href="javascript:;">
                            <input type="hidden" name="img_b" id="b" value="">
                            <div class="topImg">
                                <!--<img src="/html/img/scImg.png" id="imgb">-->
                                <if condition="$car_info!=null"><img src="{$car_info.img_b}" ></if>
                                <if condition="$car_info==null"><img src="/html/img/scImg.png" id="imgb"></if>
                            </div>
                            <p>请上传行驶证（副页）</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="tishi">(车辆信息上传审核通过后，不可更改，不限本人名下车辆)</div>
        </form>
    </div>
</div>
<div class="btn">
    <if condition="$car_info!=null"></if>
    <if condition="$car_info==null">   <button type="button" class="layui-btn save_car">保存车辆信息</button></if>

</div>
</body>
<script type="text/javascript" src="/html/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/html/layui/layui.js"></script>
<script>
    layui.use(['form','layer','jquery'],function(){
        var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : parent.layer,
                $ = layui.jquery;

        $( '#idcard').blur( function(e){
            var idcard=$( '#idcard').val()
            $.ajax({
                type: "post",
                url: "/portal/index/check_idcard",
                data:{"idcard":idcard},
                dataType: "json",
                success: function(res) {
                    layer.msg(res)
                    console.log(res)
                }
            });
        })

        var provinceText = "";
        var cityText = "";
        var areaText = "";
        //异步加载下拉框数据
        $.ajax({
            type: "post",
            url: "/portal/index/get_district",
            dataType: "json",
            success: function(res) {
                $html=''
                $.each(res, function (index, item) {
                    $html += "<option value='" + item.id + "'>" + item.name + "</option>";
                });
                $("#province").append($html);
                //append后必须从新渲染
                form.render('select');
            }
        });


        //监听省下拉框
        form.on('select(province)', function(dataObj){
            console.log(1)
            //移除城市下拉框所有选项
            $("#city").empty();
            var cityHtml = '<option value="">请选择街道</option>';
            $("#city").html(cityHtml);
            var areaHtml = '<option value="">请选择社区</option>';
            $("#area").html(areaHtml);
            provinceText = $("#province").find("option:selected").text();
            var value = $("#province").val();
            console.log(value)
            //异步加载下拉框数据

            $.ajax({
                type: "post",
                url: "/portal/index/get_street",
                data:{"id":value},
                dataType: "json",
                success: function(res) {
                    $html=''
                    var $html = "";
                    $.each(res, function (index, item) {
                        $html += "<option value='" + item.id + "'>" + item.name + "</option>";
                    });
                    $("#city").append($html);
                    //append后必须从新渲染
                    form.render('select');
                }
            });
        });

        //监听市下拉框
        form.on('select(city)', function(dataObj){
            //移除县区下拉框所有选项
            $("#area").empty();
            var html = '<option value="">请选择社区</option>';
            $("#area").html(html);

            cityText = $("#city").find("option:selected").text();
            var value = $("#city").val();
            //异步加载下拉框数据
            $.ajax({
                type: "post",
                url: "/portal/index/get_community",
                data:{"id":value},
                dataType: "json",
                success: function(res) {
                    $html=''
                    var $html = "";
                    $.each(res, function (index, item) {
                        $html += "<option value='" + item.id + "'>" + item.name + "</option>";
                    });
                    $("#area").append($html);
                    //append后必须从新渲染
                    form.render('select');
                }
            });
        });

        //监听县区下拉框
        form.on('select(area)', function(dataObj){
            areaText = $("#area").find("option:selected").text();
        });
    });


    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/portal/index/up_picture' //上传接口
            ,done: function(res){
                console.log(res.url);
                $("#img").val(res.url);
                $('#pic').attr('src',res.url);
                //上传完毕回调
                $.ajax({
                    type: "post",
                    url: "/portal/personal/save_avatar",
                    data: {avatar:res.url},
                    dataType: "json",
                    success: function(res) {
                        layer.msg(res.msg)
//                        if(res.code!=0){
//                            setTimeout(function(){ window.location.href = 'change_info/'; }, 1000);
//                        }
                    }
                });
            }
            ,error: function(){
                //请求异常回调
            }
        });

        //上传正面
        var uploadInst = upload.render({
            elem: '#imga' //绑定元素
            ,url: '/portal/index/up_picture' //上传接口
            ,done: function(res){
                console.log(res.url);
                $("#a").val(res.url);
                $('#imga').attr('src',res.url);
                //上传完毕回调
            }
            ,error: function(){
                //请求异常回调
            }
        });
        //上传反面
        var uploadInst = upload.render({
            elem: '#imgb' //绑定元素
            ,url: '/portal/index/up_picture' //上传接口
            ,done: function(res){
                console.log(res.url);
                $("#b").val(res.url);
                $('#imgb').attr('src',res.url);
                //上传完毕回调
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });

    var bootstrapDateTimeInput = $("#datetime");
    if (bootstrapDateTimeInput.length) {
        Wind.css('bootstrapDatetimePicker');
        Wind.use('bootstrapDatetimePicker', function () {
            bootstrapDateTimeInput.datetimepicker({
                minView: "month", //选择日期后，不会再跳转去选择时分秒
                language:  'zh-CN',
                format: 'yyyy-mm-dd',
                todayBtn:  1,
                autoclose: 1,
            });
        });
    }
    layui.use(['form','layer'], function(){
        var form = layui.form
                ,layer = layui.layer;

//        laydate.render({
//            elem: '#date'
//            //,type: 'date' //默认，可不填
//        });

        //监听提交
//        form.on('submit(formDemo)', function(data){
//            console.log(data)
//            layer.msg(JSON.stringify(data.field));
//            return false;
//        });
        $(".Btn").click(function () {
            var data=$('#form').serialize()
            $.ajax({
                type: "post",
                url: "/portal/personal/save_user_info",
                data: data,
                dataType: "json",
                success: function(res) {
                    layer.msg(res.msg)
                    if(res.code!=0){
                        setTimeout(function(){ window.location.href = 'change_info/'; }, 1000);
                    }
                }
            });
        })
        $(".save_car").click(function () {
            var data=$('#form_car').serialize()
            $.ajax({
                type: "post",
                url: "/portal/personal/save_car_info",
                data: data,
                dataType: "json",
                success: function(res) {
                    layer.msg(res.msg)
                    if(res.code!=0){
                        setTimeout(function(){ window.location.href = 'change_info/'; }, 1000);
                    }
                }
            });
        })
    });
</script>
</html>